<template>
  <div class="card">
    <div class="title2 title2-padding">自定义遥测量</div>
    <div class="btn-flex">
      <el-button class="pry-btn" @click="handleWatch()">遥测观察</el-button>
      <el-button class="pry-btn" @click="watchChart()">遥测折线</el-button>
      <el-button class="pry-btn" @click="watchMultiChart()">遥测复合折线</el-button>
    </div>
    <div class="custom-scrollbar" :style="{ maxHeight: autoHeight }">
      <el-tree
        ref="treeRef"
        class="tel-tree"
        style="max-width: 600px"
        :data="treeData"
        show-checkbox
        :default-expand-all="false"
        node-key="id"
        highlight-current
        :props="defaultProps">
          <template #default="{ node, data }">
            <span>{{ data.label }}</span>
          </template>
      </el-tree>
   </div>
  </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { ElTree } from 'element-plus'
  import {fetchAllTmList, getUtm} from '@/api/loads-api.js'
  import { ElMessage } from 'element-plus'
  import { useAutoHeightMixin } from "@/mixins/AutoHeightMixin.js"

  const { autoHeight,updateHeight } = useAutoHeightMixin()
  const treeRef = ref(null)
  const tmDict = ref({})
  const defaultProps = {
    children: 'children',
    label: 'label',
  }
  
  let treeData = ref([{
    id: '',
    label: '自定义遥测量',
    children: []
  }])
  onMounted(() => {
    initData()
  })

  const fetchTreeData = () => {
    getUtm((response)=> {
      let resData = response.data.lists

      for(const item of resData){
        let child = {
          id: '',
          label: item.name,
          children: []
        }
        const ids = item.ids
        for(const idItem of ids) {
          const itemName = tmDict.value[idItem]?.description || ''
          let leafNode = {
            id: idItem,
            label: idItem + ' ' + itemName
          }
          child['children'].push(leafNode)
        }
        treeData.value[0].children.push(child)
      }
    },(err) => {
      console.log("fetch tm list failed！", err)
    })
  }

  const initData = () => {
    fetchAllTmList({}, response => {
      const resData = response.data;
      const allTms = resData?.excel?.sheets || []
      for (let tmRow of allTms) {
        const oneRows = tmRow['rows'];
        for (let tmItem of oneRows) {
          tmDict.value[tmItem.name] = tmItem
        }
      }
      fetchTreeData()
    }, error => {
      console.log(error);
    })
  }

  const gotoDetail = (newUrl, maxNum) => {
    let seqs = treeRef.value.getCheckedKeys()
    seqs = seqs.filter(seq => seq!== '')

    if (seqs.length === 0) {
      ElMessage({
        message: '请选中至少一条遥测量',
        type: 'warning',
      })
    } else if (seqs.length > maxNum) {
      ElMessage({
        message: '您最多只能选择' + maxNum + '条遥测量',
        type: 'warning',
      })
    } else {
      window.open(newUrl + '?seq=' + seqs.join(","), "_blank");
    }
  }
  
  const handleWatch = () => {
    const currentUrl = window.location.href;
    let newUrl = currentUrl.replace('upair/index', 'ud_tm_loads')
    gotoDetail(newUrl, 200)
  }

  const watchChart = () =>{
    const currentUrl = window.location.href;
    let newUrl = currentUrl.replace('upair/index', 'tm_charts')
    gotoDetail(newUrl, 6)
  }

  const watchMultiChart = () => {
    const currentUrl = window.location.href;
    let newUrl = currentUrl.replace('upair/index', 'tm_multi_charts')
    gotoDetail(newUrl, 6)
  }
  </script>
  
  <style lang="scss" scoped>

  .custom-scrollbar {
    overflow-y: auto;
  }
  </style>